<template>
  <div class="header-slot-example">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">📋 Header 插槽演示</h3>
      <p class="text-base-content/70 text-sm mb-4">
        演示如何使用 <code>#header</code> 插槽自定义弹窗头部
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 默认头部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">默认头部</h4>
          <p class="text-sm text-base-content/70 mb-4">使用组件默认的头部样式</p>

          <button @click="showDefaultModal = true" class="btn btn-primary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 渐变头部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">渐变头部</h4>
          <p class="text-sm text-base-content/70 mb-4">使用渐变背景的头部</p>

          <button @click="showGradientModal = true" class="btn btn-secondary btn-sm">
            查看效果
          </button>
        </div>
      </div>

      <!-- 简洁头部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">简洁头部</h4>
          <p class="text-sm text-base-content/70 mb-4">简洁的头部设计</p>

          <button @click="showSimpleModal = true" class="btn btn-accent btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 图标头部 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">图标头部</h4>
          <p class="text-sm text-base-content/70 mb-4">带有图标的头部设计</p>

          <button @click="showIconModal = true" class="btn btn-warning btn-sm">查看效果</button>
        </div>
      </div>
    </div>

    <!-- 默认头部 Modal -->
    <Modal v-model:visible="showDefaultModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">📋</div>
          <h3 class="text-xl font-bold mb-2">默认头部</h3>
          <p class="text-base-content/70">这是使用默认头部的弹窗</p>
        </div>
      </template>
    </Modal>

    <!-- 渐变头部 Modal -->
    <Modal v-model:visible="showGradientModal" size="lg">
      <template #header="{ close }">
        <div class="bg-gradient-to-r from-primary to-secondary text-primary-content p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                <span class="text-2xl">🌈</span>
              </div>
              <div>
                <h3 class="text-xl font-bold">渐变头部</h3>
                <p class="text-primary-content/80">美丽的渐变背景</p>
              </div>
            </div>
            <button
              @click="close"
              class="btn btn-ghost btn-sm btn-circle text-primary-content hover:bg-white/20"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🎨</div>
          <h3 class="text-xl font-bold mb-2">渐变头部</h3>
          <p class="text-base-content/70">这是使用渐变头部的弹窗</p>
        </div>
      </template>
    </Modal>

    <!-- 简洁头部 Modal -->
    <Modal v-model:visible="showSimpleModal" size="lg">
      <template #header="{ close }">
        <div class="bg-base-200 p-4">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-base-content">简洁头部</h3>
            <button @click="close" class="btn btn-ghost btn-sm btn-circle">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">✨</div>
          <h3 class="text-xl font-bold mb-2">简洁头部</h3>
          <p class="text-base-content/70">这是使用简洁头部的弹窗</p>
        </div>
      </template>
    </Modal>

    <!-- 图标头部 Modal -->
    <Modal v-model:visible="showIconModal" size="lg">
      <template #header="{ close }">
        <div class="bg-info text-info-content p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                <span class="text-xl">🎯</span>
              </div>
              <div>
                <h3 class="text-lg font-bold">图标头部</h3>
                <p class="text-info-content/80 text-sm">带有图标的头部设计</p>
              </div>
            </div>
            <button
              @click="close"
              class="btn btn-ghost btn-sm btn-circle text-info-content hover:bg-white/20"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        </div>
      </template>

      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">🎯</div>
          <h3 class="text-xl font-bold mb-2">图标头部</h3>
          <p class="text-base-content/70">这是使用图标头部的弹窗</p>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal } from '@/components/common/modal'

defineOptions({
  name: 'HeaderSlotExample',
})

// 控制各个Modal的显示状态
const showDefaultModal = ref(false)
const showGradientModal = ref(false)
const showSimpleModal = ref(false)
const showIconModal = ref(false)
</script>

<style scoped>
.header-slot-example {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  background: hsl(var(--b2));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
</style>
